<script setup lang="ts"></script>

<template>
  <div class="website-banner">
    <video
      src="@/assets/video/banner.mp4"
      class="banner-video"
      width="auto"
      autoplay
      @contextmenu.prevent.stop
      :controls="false"
      loop
      muted
    ></video>
    <div class="fixed-container relative z-10 h-full">
      <div class="banner-content">
        <h1 class="title">内容分发网络CDN</h1>
        <p class="description">
          CDN（Content Delivery
          Network）将源站内容分发至遍布全球的加速节点，当用户发起网站资源请求时，请求会被调度至离用户最近的加速节点，由加速节点直接响应用户所需内容，提高用户访问网站资源的响应速度。
        </p>
        <free-use-button></free-use-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.website-banner {
  @apply h-700px relative overflow-hidden;
  background: linear-gradient(90deg, #ecf6ff 0%, #edf6fd 100%);
  .banner-video {
    @apply h-700px absolute object-cover;
    min-width: 1920px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .banner-content {
    @apply max-w-633px h-700px flex flex-col justify-center items-start absolute top-0 left-0;
    .title {
      @apply m-0 mb-4;
      color: #0d0e15;
      font-size: 44px;
      line-height: normal;
      font-family: 'PingFang SC medium';
    }
    .description {
      @apply m-0 font-normal text-sm mb-10;
      color: #41464f;
      font-weight: 400;
      line-height: 24px;
    }
  }
}
</style>
